<template>
	<Layout class="p-5 bg-white">
    <Modal v-model="modal11">
      <img :src="url"/>
    </Modal>
		<Form >
			<h1 style="text-align: center;margin: 20px;">车辆出租</h1>
	 <div class="content">
		<div class="width1190">		
			<form action="#" style="margin-left: 100px;" method="get" class="pro-search">
				<table>
					<tbody>
						<tr>
							<th>车型：</th>
							<td>  
							     <Input @on-change="searchCarSellInfo(1)" v-model="car.name" style="width:150px" placeholder="请输入车名"></Input>
									
							</td>
							<th>车龄：</th>
							<td>
									<Select @on-change="searchCarSellInfo(1)" v-model="car.conditionId" style="width:150px"  transfer>
									        <Option  v-for="item in condition" :value="item.conditonId">{{ item.conditionInterval }}</Option>
									</Select>
							</td>
							<th>里程数：</th>
							<td>
							<Select @on-change="searchCarSellInfo(1)" v-model="car.mileageId" style="width:150px"  transfer>
							        <Option v-for="item in mileage" :value="item.mileageId">{{ item.mileageInterval }}</Option>
							</Select>
							</td>
							<th>品牌：</th>
							<td>
								<Select @on-change="searchCarSellInfo(1)" v-model="car.brandId" style="width:150px"  transfer>
										<Option v-for="item in brand" :value="item.brandId">{{ item.brandName }}</Option>
								</Select>
							</td>
						</tr>
					</tbody>
				</table>
				<table>
					<tbody>
						<tr>
							<th>价格：</th>
							<td>
								<a href="javascript:;">
									<input @click="searchPricePage(0)"
											type="radio" name="price" id="price_0" value="0"
											checked="checked" v-model="car.price" />
										<label for="price_0">不限</label>
									</a>
								<a href="javascript:;" v-for="item in prices">
									<input @click="searchPricePage(item.rentalPriceId)"  type="radio" name="price"  :id="'price_' + item.rentalPriceId " :value="item.rentalPriceId"  :key="item.rentalPriceId"  v-model="car.price" />
									<label :for="'price_' + item.rentalPriceId">{{ item.priceInterval }}</label>
								</a>
							</td>
							<td>
								<Button type="primary" shape="circle" @click="searchCarSellInfo(1)" icon="ios-search">查询</Button>
							</td>
						</tr>
					</tbody>	

				</table>
			</form>
		</div>	
		<div class="width1190">
			<div class="index-fang-list" >
				<div v-for="(item, index) in carArray" @click="carZuDetail(item.carId)">
					<dl class="index-item" :style="getLightStyleObject()">
						<dt><img :src="item.imgUrl"/></dt>
						<dd>
							<h3>{{item.brandName}} | {{item.type}} </h3>
							<div class="hui">
								<span>{{item.mileage}}Km</span>
								<!-- <span>{{car.energy}}</span>
								<span>{{car.displacement}}</span> -->
								<span class="amount">￥{{item.rentalPrice}}</span>
							</div>
						</dd>
					</dl>
				</div>
				<div class="clears"></div>
			</div>
		</div>
	</div>				
		 <div class="page">
		 	<Page :total="totalNum" :page-size="pageSize" :current="currentPage" @on-change="pageSearch"/>
		 </div>
		</Form>
	</Layout>
</template>
<script>
	
	export default {
		
		data() {
			return {
        iport : '',
        modal11 : false,
        number :10,
        orderInfo : {},
				url:'',
				car:{
					name:'',
					carCondition: null,
					mileage: null,
					brandId: null,
					mileageId : null,
					conditionId : null,
					type: "",
					// clientId: '',
					price:'0',
					rentalPriceId:'',
					
					total:null,
				},
				carArray:[],
				styleList: [{
						value: '三厢车',
						label: '三厢车'
					},
					{
						value: '两厢车',
						label: '两厢车'
					},
					{
						value: 'SUV',
						label: 'SUV'
					},
					{
						value: '掀背车',
						label: '掀背车'
					},
					{
						value: '跑车',
						label: '跑车'
					},
					{
						value: 'MPV',
						label: 'MPV'
					},
					{
						value: '敞篷车',
						label: '敞篷车'
					},
					{
						value: '旅行车',
						label: '旅行车'
					},
					{
						value: '皮卡',
						label: '皮卡'
					},
					{
						value: '客车',
						label: '客车'
					},
					{
						value: '货车',
						label: '货车'
					}
				],
				brand:[],
				mileage:[],
				condition:[],
				prices:[],
				currentPage: 1,
				pageSize:10,
				totalNum : 0
				
			}
		},
		methods: {
      getOrderStatu: function () {
        console.log(this.$data.number);
        this.number--;
        if(this.number === 0){
          clearInterval(this.longSearch)
          this.modal11 = false
          this.number = 10
          this.$Notice.error({
            title: '支付超时',
          });
        }
        //发请求查询支付状态
        this.http.get({
          url: "/pay-order/info",
          param: {

            orderNumber:this.orderInfo.orderNumber
          }
        }).then(data => {

          console.log("支付状态" + data);

          if(data == 2) {
            this.modal11 = false
            clearInterval(this.longSearch)
            //this.longSearch()

            this.$Notice.success({
              title: '支付成功',
            });


          }
        })

      },
      carZuDetail(carId){
        this.car.clientId = JSON.parse(sessionStorage.getItem('CURRENT')).client.clientId;
        console.log(this.car.clientId);
        this.http.get({
          url: "/quotarecord/info",
          param: {
            clientId: this.car.clientId,
            orderTypeId : 14
          }
        }).then(data => {
          if(data.quota +1 > 0){
            this.$router.push({
              name:'car_zu_detail',
              params:{
                carId
              }
            })
          } else{
            let paramm = {};
            this.http.post({
              url:'/pay-order/info',
              param:{
                clientId:this.car.clientId,
                orderTypeId:14
              }
            }).then((data) => {
              this.$data.orderInfo = data
              paramm.clientId = this.$data.orderInfo.clientId;
              paramm.orderNumber = this.$data.orderInfo.orderNumber;
              paramm.price = this.$data.orderInfo.price;
              paramm.orderTypeId = this.$data.orderInfo.orderTypeId;
              this.modal11 = true;
              this.url =  this.iport + 'pay/nativeV2?clientId='+paramm.clientId
                  +'&orderTypeId='+paramm.orderTypeId
                  +'&money='+paramm.price
                  +'&orderNumber='+paramm.orderNumber
			  console.log(this.url)
              this.longSearch = setInterval(this.getOrderStatu,3000)
            })
          }
          console.log(data);
        });

			},
			getLightStyleObject: function() {
				return {
					animation: 'light'+this.common.getRandom(1, 4)+" "+this.common.getRandom(1, 10)+'s infinite',
				}
			},
			//获取所有品牌
			getBrand() {
				this.http.get({
					url: "/brand/list",
					param: {}
				}).then(data => {
					this.$data.brand = data
					let unCondition = {
						brandId : 0,
						brandName : '不限'
					}
					this.$data.brand.unshift(unCondition)
				});
			},
			//获取所有车龄
			getCondition:function(){		
				this.http.get({
					url: "/car-condition/all",
					param: {}
				}).then(data => {
					//this.$data.brand = data
					this.$data.condition = data
					let unCondition = {
						conditonId : 0,
						conditionInterval : '不限'
					}
					this.$data.condition.unshift(unCondition)
				});
			},
			//获取所有里程数
			getMileage:function(){
				this.http.get({
					url: "/mileage/all",
					param: {}
				}).then(data => {
					//this.$data.brand = data
					this.$data.mileage = data;
					let unCondition = {
						mileageId : 0,
						mileageInterval : '不限'
					}
					this.$data.mileage.unshift(unCondition)
				});
			},
			//搜索

			pageSearch: function(changedPage) {
			  this.$data.car.currentPage = changedPage
			  this.searchCarSellInfo(changedPage)
			},
			
			searchCarSellInfo:function(current){
				console.log(this.car.name);  //这里是searchKey
				console.log(this.car.conditionId); // null
				console.log(this.car.mileageId); // null
				console.log(this.car.brandId); //null
				console.log(this.car.type);
			
				
				if(this.car.name == ""){
					this.car.name = null;
				}
				
				if(this.car.type == ""){
					this.car.type = null;
				}				
				this.http.get({
					url: "/car-rental-info/page",
					param: {
						searchKey : this.car.name,
						conditionId: this.car.conditionId,
						mileageId : this.car.mileageId,
						brandId : this.car.brandId,
						rentalPriceId: this.car.rentalPriceId,
						type : this.car.type,
						currentPage : current,
						// pageSize : this.pageSize
						// clientId:this.car.clientId
						pageSize : this.pageSize,
					}
				}).then(data => {
					console.log("卖车列表为");
					console.log(data);
					this.$data.pageSize = data.size,
					this.$data.currentPage = data.current,
					this.$data.totalNum = data.total
					this.$data.carArray = data.records
				});
				
				
				
			},
			searchPricePage(rentalPriceId){
				console.log(rentalPriceId)
				this.$data.car.rentalPriceId = rentalPriceId
				this.searchCarSellInfo()
			},
			searchPrice:function(){
				this.http.get({
						url : "/car-rental-price/list",
					}).then(data => {
						console.log(data)
						this.$data.prices = data
						// self.$data.regins = data;
					})
				},
		},
		created: function() {
			this.$data.currentUser = JSON.parse(sessionStorage.getItem('CURRENT'))
			this.$data.car.clientId = this.$data.currentUser.client.clientId
			this.iport = this.store.state.iport
			this.searchPrice()
			this.getMileage();
			this.getBrand();
			this.getCondition();
			this.searchCarSellInfo()
			// var cli = this.local.session.getItem("CURRENT");
			// this.houseSell.clientId = cli.client.clientId;
		},
		beforeRouteLeave(to, from, next) {
		    this.$destroy();//手动销毁当前页面
		    next();
		},
	}
</script>

<style >
</style>
